<script setup lang="ts">
import {computed, type PropType} from "vue";
import CodeEditor from "@/compontents/code-editor.vue";
import type {SqlType} from "@/type/sql-type.ts";

const props = defineProps({
  modelValue: {
    type: Object as PropType<SqlType>,
    default() {
      return {
        parentId: ''
      }
    }
  },
  enableEdit: {
    type: Boolean,
    default: false,
  }
})
const emit = defineEmits(['update:modelValue'])
const sqlFormObj = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
</script>

<template>
  <el-form label-width="auto">
    <el-row :gutter="12">
      <el-col :span="sqlFormObj.sqlCommandType === 'SELECT' ? 12: 24">
        <el-form-item label="SQL类型">
          <el-select v-model="sqlFormObj.sqlCommandType">
            <el-option label="SELECT" value="SELECT"></el-option>
            <el-option label="INSERT" value="INSERT"></el-option>
            <el-option label="UPDATE" value="UPDATE"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-if="sqlFormObj.sqlCommandType === 'SELECT'" :span="12">
        <el-form-item label="查询类型">
          <el-select v-model="sqlFormObj.selectType">
            <el-option label="单条查询" value="ONE"></el-option>
            <el-option label="列表查询" value="LIST"></el-option>
            <el-option label="分页查询" value="PAGE"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="SQL描述">
      <el-input v-model="sqlFormObj.sqlDesc"/>
    </el-form-item>
    <el-form-item label="SQL信息" label-position="top">
      <code-editor
          v-model="sqlFormObj.sqlTemplate"
          width="100%"
          height="55vh"
          min-height="50vh"
      />
    </el-form-item>
  </el-form>
</template>

<style scoped>

</style>
